<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>管理员信息</title>
    <link rel="stylesheet" href="./common/element/element.css">
</head>

<body>
    <div id="app">
        <h2>管理员信息</h2>
        <el-row>
            <el-col :span="18" style="margin-bottom: 10px">
                <el-input v-model="query.username" style="width: 160px;" placeholder="请输入用户名"></el-input>
                <el-input v-model="query.realname" style="width: 160px;" placeholder="请输入姓名"></el-input>
                <el-input v-model="query.contact" style="width: 160px;" placeholder="请输入联系方式"></el-input>
                <el-button type="info" @click="getList(true)">查询</el-button>
                <el-button type="primary" @click="dialogVisible = true">新增</el-button>
                <el-button type="success">刷新</el-button>
                <el-button type="warning" @click="removeMultiple">批量删除</el-button>
            </el-col>
        </el-row>

        <el-table :data="tableData" stripe border style="width: 99%" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="45" align="center"></el-table-column>
            <el-table-column prop="username" label="用户名" align="center"></el-table-column>
            <el-table-column prop="realname" label="姓名" align="center"></el-table-column>
            <el-table-column prop="contact" label="联系方式" align="center"></el-table-column>
            <el-table-column prop="addtime" label="创建日期" align="center"></el-table-column>
            <el-table-column fixed="right" label="操作" width="150" align="center">
                <template slot-scope="scope">
                    <el-button type="primary" icon="el-icon-edit" size="small" circle
                        @click="showModifyDialog(scope.row.adminid)"></el-button>
                    <el-button type="danger" icon="el-icon-delete" size="small" circle></el-button>
                </template>
            </el-table-column>

        </el-table>
        <el-row type="flex" justify="center" style="margin-top: 10px">
            <el-pagination background layout="prev, pager, next" :total="total" :current-page="pageNum"
                :page-size="pageSize" @current-change="handleCurrentChange">
            </el-pagination>
        </el-row>

        <!-- 添加 -->
        <el-dialog title="新增管理员信息" :visible.sync="dialogVisible" @close="handleClosed">
            <el-form :model="form" label-width="80px" :rules="addRules" ref="addRef">
                <el-form-item label="用户名" prop="username">
                    <el-input v-model="form.username" placeholder="请输入用户名"></el-input>
                </el-form-item>

                <el-form-item label="姓名" prop="realname">
                    <el-input v-model="form.realname" placeholder="请输入姓名"></el-input>
                </el-form-item>
                <el-form-item label="联系方式" prop="contact">
                    <el-input v-model="form.contact" placeholder="请输入联系方式"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="addUser">确 定</el-button>
            </span>
        </el-dialog>

        <!-- 修改 -->
        <el-dialog title="修改管理员信息" :visible.sync="editDialogVisible" @close="handleEditClosed">
            <el-form :model="editForm" label-width="80px" :rules="editRules" ref="editRef">
                <el-form-item label="用户编号" prop="adminid">
                    <el-input v-model="editForm.adminid" readonly></el-input>
                </el-form-item>
                <el-form-item label="用户名" prop="username">
                    <el-input v-model="editForm.username" placeholder="请输入用户名"></el-input>
                </el-form-item>

                <el-form-item label="姓名" prop="realname">
                    <el-input v-model="editForm.realname" placeholder="请输入姓名"></el-input>
                </el-form-item>
                <el-form-item label="联系方式" prop="contact">
                    <el-input v-model="editForm.contact" placeholder="请输入联系方式"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="editDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="editUser">确 定</el-button>
            </span>
        </el-dialog>

    </div>

    <script src="./common/js/jquery-1.9.0.min.js"></script>
    <script src="./common/js/vue.js"></script>
    <script src="./common/js/axios.min.js"></script>
    <script src="./common/element/element.js"></script>
    <script>
        const vue = new Vue({
            el: '#app',
            data: {
                tableData: [], //列表数据
                pageSize: 5, // 页大小
                pageNum: 1, // 页码
                total: 9, //数据总数
                dialogVisible: false, //增、改对话框是否显示
                form: {
                    username: '',
                    realname: '',
                    contact: ''
                }, // 表单数据
                query: { // 查询条件
                    username: '',
                    realname: '',
                    contact: ''
                },
                multipleSelection: [], // 要删除的项
                addRules: {
                    username: [
                        { required: true, message: '请输入用户名', trigger: 'blur' },
                        { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
                    ],
                    realname: [
                        { required: true, message: '请输入姓名', trigger: 'blur' }
                    ],
                    contact: [
                        { pattern:/^1\d{10}$/, message: '手机号格式不正确！', trigger: 'blur' }
                    ]
                },
                editDialogVisible: false,
                editForm: {},
                editRules: {
                    username: [
                        { required: true, message: '请输入用户名', trigger: 'blur' },
                        { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
                    ],
                    realname: [
                        { required: true, message: '请输入姓名', trigger: 'blur' }
                    ],
                    contact: [
                        { pattern:/^1\d{10}$/, message: '手机号格式不正确！', trigger: 'blur' }
                    ]
                },
                
            },
            created() {
                this.getList()
            },
            methods: {
                async getList(flag) {
                    // 如果是按条件查询，则从第1页找
                    if(flag){
                        this.pageNum = 1
                    }
                    const { data: res } = await axios.get('http://localhost:8080/admin/query', {
                        params: {
                            pageNum: this.pageNum,
                            pageSize: this.pageSize,
                            ...this.query
                        }
                    })
                    console.log(res)

                    this.tableData = res.data.list
                    this.total = res.data.total
                    this.pageNum = res.data.pageNum
                    this.pageSize = res.data.pageSize
                },
                // 监听页码的改变
                handleCurrentChange(val) {
                    this.pageNum = val
                    this.getList()
                },
                handleSelectionChange(val) {
                    this.multipleSelection = val;
                },
                removeMultiple() {
                    this.$confirm('确定要删除吗？', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(async () => {
                        var ids = this.multipleSelection.map(item => item.adminid)

                        const {data:res} = await axios.delete('http://localhost:8080/admin/removeMultiple',{
                            data: ids
                        })
                        console.log(res)

                        this.$message.success('删除成功');
                    }).catch(() => {
                        this.$message.info('已取消删除');
                    });
                },
                addUser(){
                    // 判断表单是否校验通过
					this.$refs.addRef.validate(async valid => {
						if(!valid){
							return
						}

						// 发送请求
						var { data: res } = await axios.post('http://localhost:8080/admin', this.form)
	
						// 判断是否登录
						if (res.status != 200) {
							return this.$message.error(res.msg)
						}

                        // 关闭弹框
                        this.dialogVisible = false
                        // 提示消息
                        this.$message.success('添加成功')
						// 重新加载数据
                        this.getList()
					})
                },
                // 监听弹窗的关闭
                handleClosed(){
                    this.$refs.addRef.resetFields()
                },
                // 显示修改对话框
                async showModifyDialog(id){
                    const {data:res} = await axios.get('http://localhost:8080/admin/'+id)
                    if (res.status != 200) {
                        return this.$message.error(res.msg)
                    }

                    this.editForm = res.data

                    this.editDialogVisible = true
                },
                // 修改用户
                editUser(){
                    // 判断表单是否校验通过
					this.$refs.editRef.validate(async valid => {
						if(!valid){
							return
						}

						// 发送请求
						var { data: res } = await axios.put('http://localhost:8080/admin', this.editForm)
	
						// 判断是否登录
						if (res.status != 200) {
							return this.$message.error(res.msg)
						}

                        // 关闭弹框
                        this.editDialogVisible = false
                        // 提示消息
                        this.$message.success('修改成功')
						// 重新加载数据
                        this.getList()
					})
                },
                // 监听修改弹窗的关闭
                handleEditClosed(){
                    this.$refs.editRef.resetFields()
                },
            }

        });
    </script>


</body>

</html>